<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <div id="clock-box">
            <div id="clock-time" ref="time">00:00:00</div>
            <div id="clock-date" ref="date">xxxx年xx月xx日</div>
        </div>
    </div>
</body>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3


    // 组件是可复用的 Vue 实例
    // 1. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的

    // 组件命名方式 
    // Vue2建议使用:中划线命名法  button-counter
    // Vue3建议使用:驼峰式命名法  ButtonCounter

    // 组件注册: 
    //  Vue.component("componentName",componentOptions={})

    // 注意:
    // 1. 每个组件必须只有一个根元素
    // 2. 组件要先注册在使用

    // 如何使用组件:
    // 可以在Vue根实例/父组件中，把这个组件作为自定义元素来使用：



    var vm = new Vue({
        el: "#app",
        data: {
            date: new Date(),
            timer: null,
        },
        methods: {
            showTime() {
                var year = this.date.getFullYear();
                var month = this.date.getMonth() + 1;
                var day = this.date.getDate();

                var hour = this.date.getHours();
                var minute = this.date.getMinutes();
                var second = this.date.getSeconds();

                var beauty = this.beauty;

                this.$refs.time.innerHTML = `${beauty(hour)}:${beauty(minute)}:${beauty(second)}`;
                this.$refs.date.innerHTML = `${year}年${beauty(month)}月${beauty(day)}日`;
            },
            beauty(num) {
                return num < 10 ? "0" + num : num;
            }
        },
        mounted() {
            this.showTime();
            this.timer = setInterval(this.showTime, 1000);
        }
    })







</script>

</html>